<template>
    <div>
        <header class="header">
            <div class="container">
                <h1>选择职业</h1>
            </div>
        </header>
        <div class="container career-select mt-4">

            <div class="careers">
                <div class="item m-2" :class="{selected:selected===career.id,learned:career.is_selected}"
                     v-for="career in careers"
                     :key="career.id" @click="selected=career.id">
                    <div class="title">
                        {{career.title}}
                        <span v-if="career.is_selected"><span>(已学)</span></span>
                    </div>
                </div>
            </div>

            <template v-if="selected&&isSelected()">
                <div class="button-wrap primary mb-4">
                    <button class="button" @click="enter">进入
                    </button>
                </div>
                <div class="button-wrap danger">
                    <button class="button" @click="forget">遗忘</button>
                </div>
            </template>
            <template v-else-if="selected">
                <div class="button-wrap primary">
                    <button class="button" @click="select">学习</button>
                </div>
            </template>


        </div>

    </div>

</template>

<script>
    export default {
        data() {
            return {
                careers: [],
                selected: null,
            }
        }, methods: {
            isSelected() {
                let f = _.find(this.careers, {id: this.selected});
                return f.is_selected;
            },
            getCareers() {
                axios.get('careers').then((res) => {
                    this.careers = res.data.data;
                });
            }, select() {
                axios.post('careers/' + this.selected).then((res) => {
                    this.$router.push({name: 'career-current'});
                });
            }, forget() {
                axios.delete('careers/' + this.selected).then((res) => {
                    this.getCareers();
                });
            }, enter() {
                this.$router.push({name: 'career-skill', params: {career: this.selected}})
            }
        }, created() {
            this.getCareers();
        }
    }
</script>

<style>

</style>